<template>
  <div class="app">
    <!-- 模态框组件进来来个推荐 -->
    <van-dialog v-model="show">
      <img :src="url" />
    </van-dialog>
    <transition name="fade" appear>
      <router-view></router-view>
    </transition>
    <tabbar v-show="isShowTab"></tabbar>
  </div>
</template>

<script>
import tabbar from '@/components/Tabbar'
// 引入封装好的 http
import http from '@/util/http'
// 引入axios
import Vue from 'vue'
// 引入vant 组件
import Vant from 'vant'
import 'vant/lib/index.css'
// 引入全局状态
import { mapState, mapMutations } from 'vuex'
Vue.use(Vant)
export default {
  data () {
    return {
      show: false,
      url: 'https://img01.yzcdn.cn/vant/apple-3.jpg'
    }
  },
  computed: {
    ...mapState(['isShowTab', 'cityId'])
  },
  components: {
    tabbar
  },
  mounted () {
    // 请求首页出现的图片
    http({
      url: `/gateway?cityId=${this.cityId}&k=4332703`,
      headers: {
        'X-Host': 'mall.cfg.film-float.banner'
      }
    }).then((res) => {
      this.show = true
      this.url = res.data.data.imgUrl
    })
    this.$router.push('/city')
  },
  methods: {
    // 引入清除模块
    ...mapMutations(['cityChangeName', 'cityChangeId', 'clearList'])
  }
}
</script>

<style lang="scss" >
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,
body {
  height: 100%;
}
.app {
  padding-bottom: 48px;
}
body {
  max-width: 1200px;
  margin: auto;
  color: #333;
  background-color: #f4f4f4;
}
img {
  vertical-align: middle;
}
.van-toast {
  padding: 0;
  background: transparent;
  color: #333;
  img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    opacity: 0.3;
  }
}
.van-dialog__content {
  img {
    width: 100%;
  }
}
@keyframes fade {
  0% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    transform: translateY(50px);
  }
}
.fade-enter-active {
  animation: fade 0.5s reverse;
}
.fade-leaver-active {
  opacity: 0;
  animation: fade 0.5s;
}
</style>
